<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <!-- 重要，请到 https://console.amap.com 申请 JS API 的 key和密钥 -->
    <script>
      window._AMapSecurityConfig = {
        securityJsCode: "c5d08ec0ca6a43f361b3edaa78bca2e3",
      };
    </script>
    <title>GeoJSON</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
    </style>
    <link
      rel="stylesheet"
      href="//a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
    <script src="https://webapi.amap.com/maps?v=2.0&key=26507bfb54ab8c3a980b43ad03273a9f&plugin=AMap.GeoJSON"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var map = new AMap.Map("container", {
        center: [111.357465, 16.347794],
        zoom: 9,
        mapStyle: "amap://styles/58f7c54a2ce2e5ea704c30ea9f53cbaa",
      });
      ajax("./coralMap.json", function (err, geoJSON) {
        if (!err) {
          var geojson = new AMap.GeoJSON({
            geoJSON: geoJSON,
            // 还可以自定义getMarker和getPolyline
            getPolygon: function (geojson, lnglats) {
              // 计算面积
              var area = AMap.GeometryUtil.ringArea(lnglats[0]);

              return new AMap.Polygon({
                resizeEnable: true,
                path: lnglats,
                fillOpacity: 1 - Math.sqrt(area / 8000000000), // 面积越大透明度越高
                strokeColor: "white",
                fillColor: "red",
              });
            },
          });
          map.add(geojson);
        }
      });
    </script>
  </body>
</html>
